<template>
  <view>
    <view class="top">
      <image src="../../static/1.png" style="height: 80px; width: 80px;"></image>
    </view>

    <view class="top3">
      <text class="chengon">
        预约成功
      </text>
    </view>

    <view>
      <uni-card @click="enter" style="border-radius: 20rpx;">
        <view class="container" style="display: flex; flex-direction: row;">
          <view style="flex: 0.35; ">
            <image src="../../static/3.png" style="height: 40px; width: 40px;"></image>
          </view>

          <view class="container" style="display: flex; flex-direction: column;">
            <view style="flex: 0.1; align-items:first baseline;">
              <text class="shaoma">扫码入园</text>
            </view>

            <view style="flex: 0.1; align-items:last baseline;">
              <text class="saoma1"> the QR code to enter the park</text>
            </view>
          </view>
        </view>
      </uni-card>
    </view>

    <view class="yuyue">
      <text class="yuyuexinxi">
        预约信息
      </text>
    </view>

    <view>
      <uni-card style="border-radius: 30rpx;">
       <view class="msg">团体名称:{{tuanti.name}}</view><br>
       <view class="msg">团体人数:{{tuanti.number}}人</view><br>
	   <view class="msg">姓名：{{user.name1}}</view><br>
	   <view class="msg">证件类型：{{user.id1}}</view><br>
	   <view class="msg">证件号码：{{user.sn1}}</view><br>
	   <view class="msg">手机号码：{{user.pnumber1}}</view><br>
      </uni-card>
    </view>

    <view class="yuyue1">
      <button @click="cancel" class="yuyuexinxi"  style="color: white; background-color: #8DCB6D;">
        取消预约
      </button>
    </view>
  </view>
</template>

<script setup>
	import { ref , reactive } from 'vue';
	import axios from 'axios';
	
	let user = reactive({
		name1:'',
		id1:'',
		sn1:'',
		pnumber1:''
	})
	let tuanti = reactive({
		name:'',
		number:'',
	})
	axios.get("/data1.json").then(function(result){
		console.info(result.data)
		console.info(result.data.user)
		console.info(result.data.tuanti)
		user.name1 = result.data.user.name
		user.id1 = result.data.user.id
		user.sn1 = result.data.user.sn
		user.pnumber1 = result.data.user.pnumber
		tuanti.name = result.data.tuanti.name
		tuanti.number = result.data.tuanti.number
		console.info(user.value)
		console.info(tuanti.value)
	}).catch().finally()
	let enter = function() {
		uni.navigateTo({
			url: '/pages/leave/pingzheng2'
		})
	}
	
	let cancel = function() {
		uni.switchTab({
			url: '/pages/leave/home'
		})
	}
</script>

<style scoped>
	.top{
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		margin-top: 18px;
	}
	.top3{
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.chengon{
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 15px;
		height: 14px;
	}
	.shaoma{
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 16px;
		color: #05261B;
	}
	.saoma1{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.msg{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-top: 19px;
		margin-bottom: 19px;
	}
	.yuyue{
		text-align: left;
		margin-left: 15px;
		margin-top: 17px;
		margin-bottom: 17px;
		height: 20px;
	}
	.yuyuexinxi{
		font-family: PingFangSC;
		font-weight: bold;
		font-size: 15px;
		color: black;
		letter-spacing: 0;
		width: 700rpx;
		height: 90rpx;
		margin-top: 30rpx;
		justify-content: center;
		border-radius: 160px;
	}
	.yuyue1{
		margin-top: 50px;
		margin-bottom: 15px;
		height: 100px;
	}
</style>